import React, {useEffect} from 'react';
import {Button, Form, Input, Select, Space, Switch, Table,} from "antd";
import {
  changeParams,
  getFindEveryByIdAsync,
  getHospitalListAsync,
  getHospitalStatusAsync,
  useSelectorHospList
} from "@/store/slice/hospList";
import {useAppDispatch} from "@/hooks";
import {useNavigate} from "react-router-dom";
import {getHospitalSetAsync} from "@/store/slice/hosp";
const Option = Select.Option

function HospitalList() {
  const navigate = useNavigate()
  const {hospList,pageInfo,provinceCodeList} = useSelectorHospList()
  // console.log(provinceCodeList)
  const dispatch = useAppDispatch()
  const [form] = Form.useForm()
  useEffect(()=>{
    dispatch(getHospitalListAsync(pageInfo.current,pageInfo.pageSize))
    dispatch(getFindEveryByIdAsync(86))
  },[])
  return (
    <div>
      <Space style={{marginBottom: 16}}>
        <Form
          form={form}
          name="basic"
          initialValues={{ remember: true }}
          onFinish={(values)=>{
            console.log(values)
            dispatch(changeParams(values))
            dispatch(getHospitalListAsync(1,pageInfo.pageSize))
          }}
          autoComplete="off"
          layout={"inline"}
        >
          <Form.Item name={"provinceCode"}>
            <Select onChange={(value)=>{
              dispatch(getFindEveryByIdAsync(value))
              form.setFieldsValue({
                cityCode:undefined,
                districtCode:undefined
              })
            }} placeholder={"请选择省份"}>

              provinceCodeList.length === 0 && {
              provinceCodeList.map((item:any)=>(
                <Option key={item.id} value={item.value}>{item.name}</Option>
              ))
            }
            </Select>
          </Form.Item>

          <Form.Item name={"cityCode"}>
            <Select placeholder={"请选择市"}>

            </Select>
          </Form.Item>

          <Form.Item name={"districtCode"}>
            <Select placeholder={"请选择区"}>

            </Select>
          </Form.Item>

          <Form.Item name={"hostype"}>
            <Select placeholder={"请选择医院类型"}>
              hospList.length === 0 && {
                hospList.map((item:any)=>(
                  <Option key={item.id} value={item.value}>{item.param.hostypeString}</Option>
                ))
              }
            </Select>
          </Form.Item>

          <Form.Item
            name="hosname"
          >
            <Input placeholder={"请输入医院信息"} />
          </Form.Item>

          <Form.Item
            name="hoscode"
          >
            <Input placeholder={"请输入医院编码"} />
          </Form.Item>
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit">
                搜索
              </Button>
              <Button onClick={()=>{
                form.resetFields()
                dispatch(getHospitalSetAsync(1,pageInfo.pageSize))
              }} htmlType="button">
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Space>
      <Table
        pagination={{
          ...pageInfo,
          onChange(page,pageSize){
            dispatch(getHospitalListAsync(page,pageSize))
          }
        }}
        rowKey={"id"}
        dataSource={hospList}
        bordered={true}
        scroll={{x:1400}}
        columns={[
          {
            title:"序号",
            align:"center",
            render(value,rows,index){
              return (pageInfo.current-1)*pageInfo.pageSize + index+1
            }
          },{
            title:"医院名称",
            align:"center",
            dataIndex:"hosname"
          },{
            title:"医院编号",
            align:"center",
            dataIndex:"hoscode"
          },{
            title:"医院LOGO",
            align:"center",
            render(rows){
              return(
                <img width={60} src={"data:image/jpeg;base64,"+rows.logoData}/>
              )
            }
          },{
            title:"是否上线",
            align:"center",
            dataIndex:"status",
            render(status,rows){
              return(
                <Switch checked={status===0} onChange={()=>{
                  dispatch(getHospitalStatusAsync(rows.id,status))
                }} />
              )
            }
          },{
            title:"医院等级",
            align:"center",
            dataIndex:"param",
            render({hostypeString}){
              return hostypeString
            }
          },{
            title:"医院地址",
            align:"center",
            dataIndex:"param",
            render({hostypeString}){
              return hostypeString
            }
          },{
            title:"创建时间",
            align:"center",
            dataIndex:"createTime"
          },{
            title:"操作",
            align:"center",
            fixed:"right",
            // dataIndex:"id",
            render(rows){
              return(
                <Space>
                  <Button onClick={()=>{
                    navigate("/hospital/show/" + rows.id)
                  }} type={"primary"}>查看</Button>
                  <Button onClick={()=>{
                    navigate("/hospital/department/" +rows.hoscode)
                  }} type={"primary"}>排班</Button>
                </Space>
              )
            }
          },
        ]}
      >
      </Table>
    </div>

  );
}

export default HospitalList;
